<template>
  <view class="container">
    <view class="box">
      <view class="cell flex">
        <view class="label">真实姓名</view>
        <input type="text" placeholder="请输入真实姓名" />
      </view>
      <view class="cell flex">
        <view class="label">支付宝账号</view>
        <input type="text" placeholder="请输入支付宝账号" />
      </view>
      <view class="cell flex">
        <view class="label">验证码</view>
        <input type="number" placeholder="请输入验证码" />
        <u-toast ref="uToastRef"></u-toast>
        <u-verification-code
          :seconds="seconds"
          @end="end"
          @start="start"
          ref="uCode"
          @change="codeChange"></u-verification-code>
        <view @click="getCode" class="code-btn">{{ tips }}</view>
      </view>
      <view class="btn">确认绑定</view>
    </view>
    <view @click="goAlipayGuide" class="tips">支付宝账户获取教程</view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
onLoad((options) => {
  console.log(options);
  const { type } = options;
  if (type) {
    uni.setNavigationBarTitle({
      title: type === 'alipay' ? '绑定支付宝账号' : '绑定账号',
    });
  }
});
const tips = ref('');
const uCode = ref(null);
const seconds = ref(10);
const uToastRef = ref(null);
const codeChange = (text) => {
  tips.value = text;
};
const getCode = () => {
  if (uCode.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码',
    });
    // setTimeout(() => {
    uni.hideLoading();
    // 这里此提示会被this.start()方法中的提示覆盖
    uToastRef.value.show({ title: '验证码已发送' });
    // 通知验证码组件内部开始倒计时
    uCode.value.start();
    // }, 2000);
  } else {
    uToastRef.value.show({ title: '倒计时结束后再发送' });
  }
};
const end = () => {
  console.log('倒计时结束');
};
const start = () => {
  console.log('倒计时开始');
};
const goAlipayGuide = () => {
  uni.navigateTo({
    url: '/subPages/alipayGuide/alipayGuide',
  });
};
</script>

<style lang="scss" scoped>
.container {
  background: #f8f8f8;
  min-height: 100vh;
  padding: 12px;
  .box {
    border-radius: 12px;
    overflow: hidden;
    padding: 12px;
    background-color: #fff;
    .cell {
      height: 52px;
      border-bottom: 1px solid #0000000f;
      margin-bottom: 12px;
      &:last-child {
        border-bottom: none;
      }
      .label {
        font-weight: 500;
        font-size: 14px;
        color: #333;
        width: 7em;
      }
      input {
        font-weight: 400;
        font-size: 14px;
        color: #ccc;
        flex: 1;
      }
      .code-btn {
        color: #ff0309;
        font-weight: 400;
        font-size: 14px;
      }
    }
    .btn {
      background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
      height: 50px;
      border-radius: 34px;
      margin: 0 16px;
      text-align: center;
      font-weight: 500;
      font-size: 16px;
      line-height: 50px;
      color: #fff;
    }
  }
  .tips {
    font-weight: 400;
    font-size: 12px;
    color: #ff0309;
    margin-top: 12px;
  }
}
</style>
